<template>
  <div class="maincontent">
    <el-form :inline="true" label-position="left" :model="form" label-width="80px">
      <div class="maintitle" style="margin-top:40px;">项目市级投资信息</div>
      <div style="display: flex;-webkit-box-align: center;margin-top:20px;">
        <div class="secondtitle">工程施工费</div>
        <div style="-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;">
          <el-form-item label="田间道路工程费" label-width="125px" style="margin-right:60px;">
            <el-input
              @input="projectNumChange"
              type="number"
              v-model="form.fieldRoadConstructionFee"
              style="width:200px;"
              min="0"
              :readonly="isCurrentProcess"
            >
              <template slot="append">万元</template>
            </el-input>
          </el-form-item>
          <el-form-item
            @input="projectNumChange"
            label="土地平整工程费"
            label-width="125px"
            style="margin-right:60px;"
          >
            <el-input
              type="number"
              v-model="form.landLevelingProjectFee"
              style="width:200px;"
              min="0"
              :readonly="isCurrentProcess"
            >
              <template slot="append">万元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="农田水利工程费" label-width="125px" style="margin-right:60px;">
            <el-input
              @input="projectNumChange"
              type="number"
              v-model="form.farmlandWaterConservancyProjectFee"
              style="width:200px;"
              min="0"
              :readonly="isCurrentProcess"
            >
              <template slot="append">万元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="生态保护工程费" label-width="125px" style="margin-right:60px;">
            <el-input
              @input="projectNumChange"
              type="number"
              v-model="form.ecologicalProtectionEngineeringFee"
              style="width:200px;"
              min="0"
              :readonly="isCurrentProcess"
            >
              <template slot="append">万元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="其他工程费" label-width="125px">
            <el-input
              @input="projectNumChange"
              type="number"
              v-model="form.otherEngineeringFees"
              style="width:200px;"
              min="0"
              :readonly="isCurrentProcess"
            >
              <template slot="append">万元</template>
            </el-input>
          </el-form-item>
        </div>
      </div>
      <div style="display: flex;-webkit-box-align: center;">
        <div class="secondtitle" style="margin-right:62px;">其他</div>
        <div style="-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;">
          <el-form-item label="其他费用" label-width="125px" style="margin-right:60px;">
            <el-input
              @input="projectNumChange"
              type="number"
              v-model="form.otherExpenses"
              style="width:200px;"
              min="0"
              :readonly="isCurrentProcess"
            >
              <template slot="append">万元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="设备购置费" label-width="125px" style="margin-right:60px;">
            <el-input
              @input="projectNumChange"
              type="number"
              v-model="form.originalEquipmentCost"
              style="width:200px;"
              min="0"
              :readonly="isCurrentProcess"
            >
              <template slot="append">万元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="不可预见费用" label-width="125px" style="margin-right:60px;">
            <el-input
              @input="projectNumChange"
              type="number"
              v-model="form.contingencyCost"
              style="width:200px;"
              min="0"
              :readonly="isCurrentProcess"
            >
              <template slot="append">万元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="建设亩均投资" label-width="125px" style="margin-right:60px;">
            <el-input
              @input="projectNumChange"
              type="number"
              v-model="form.constructionPerAcreInvestment"
              style="width:200px;"
              min="0"
              :readonly="isCurrentProcess"
            >
              <template slot="append">万元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="新增耕地亩均投资" label-width="125px" style="margin-right:60px;">
            <el-input
              @input="projectNumChange"
              type="number"
              v-model="form.addedPlowlandPerAcreInvestment"
              style="width:200px;"
              min="0"
              :readonly="isCurrentProcess"
            >
              <template slot="append">万元</template>
            </el-input>
          </el-form-item>
        </div>
      </div>
      <div style="display: flex;-webkit-box-align: center;">
        <div
          style="font-size:16px;font-family:PingFang SC;font-weight:bold;line-height:22px;color:#333333;"
        >工程施工费</div>
        <div
          style="-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;margin-left:30px;font-size:16px;font-family:PingFang SC;font-weight:bold;line-height:22px;color:#4d4d4d;"
        >
          {{form.constructionCost || 0}}
          <span
            style="font-size:13px;font-family:PingFang SC;font-weight:500;line-height:18px;margin-left:4px;color:#4c4c4c;"
          >万元</span>
        </div>
        <div
          style="font-size:16px;font-family:PingFang SC;font-weight:bold;line-height:22px;color:#333333;"
        >工程总投资</div>
        <div
          style="-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;margin-left:30px;font-size:16px;font-family:PingFang SC;font-weight:bold;line-height:22px;color:#4d4d4d;"
        >
          {{form.totalProjectCost || 0}}
          <span
            style="font-size:13px;font-family:PingFang SC;font-weight:500;line-height:18px;margin-left:4px;color:#4c4c4c;"
          >万元</span>
        </div>
      </div>
      <div class="maintitle" style="margin-top:40px;">建设信息</div>
      <div class="formcontent">
        <el-form-item label="实际建设总规模" label-width="195px" style="margin-right:40px;">
          <el-input
            type="number"
            v-model="form.realityConstructionTotalScale"
            style="width:200px;"
            min="0"
            :readonly="isCurrentProcess"
          >
            <template slot="append">公顷</template>
          </el-input>
        </el-form-item>
        <el-form-item label="实际整理规模" label-width="195px" style="margin-right:40px;">
          <el-input
            type="number"
            v-model="form.realityTidyScale"
            style="width:200px;"
            min="0"
            :readonly="isCurrentProcess"
          >
            <template slot="append">公顷</template>
          </el-input>
        </el-form-item>
        <el-form-item label="实际开发规模" label-width="195px" style="margin-right:40px;">
          <el-input
            type="number"
            v-model="form.realityExploitScale"
            style="width:200px;"
            min="0"
            :readonly="isCurrentProcess"
          >
            <template slot="append">公顷</template>
          </el-input>
        </el-form-item>
        <el-form-item label="实际复垦规模" label-width="195px" style="margin-right:40px;">
          <el-input
            type="number"
            v-model="form.realityReclamationScale"
            style="width:200px;"
            min="0"
            :readonly="isCurrentProcess"
          >
            <template slot="append">公顷</template>
          </el-input>
        </el-form-item>
        <el-form-item label="实际新增耕地总面积" label-width="195px" style="margin-right:40px;">
          <el-input
            type="number"
            v-model="form.realityAddedPlowlandTotalArea"
            style="width:200px;"
            min="0"
            :readonly="isCurrentProcess"
          >
            <template slot="append">公顷</template>
          </el-input>
        </el-form-item>
        <el-form-item label="实际新增整理耕地面积" label-width="195px" style="margin-right:40px;">
          <el-input
            type="number"
            v-model="form.realityAddedTidyPlowlandArea"
            style="width:200px;"
            min="0"
            :readonly="isCurrentProcess"
          >
            <template slot="append">公顷</template>
          </el-input>
        </el-form-item>
        <el-form-item label="实际新增开发耕地面积" label-width="195px" style="margin-right:40px;">
          <el-input
            type="number"
            v-model="form.realityAddedExploitPlowlandArea"
            style="width:200px;"
            min="0"
            :readonly="isCurrentProcess"
          >
            <template slot="append">公顷</template>
          </el-input>
        </el-form-item>
        <el-form-item label="实际新增复垦耕地面积" label-width="195px" style="margin-right:40px;">
          <el-input
            type="number"
            v-model="form.realityAddedReclamationPlowlandArea"
            style="width:200px;"
            min="0"
            :readonly="isCurrentProcess"
          >
            <template slot="append">公顷</template>
          </el-input>
        </el-form-item>
        <el-form-item label="实际基本农田整理规模" label-width="195px" style="margin-right:40px;">
          <el-input
            type="number"
            v-model="form.realityCroplandExploitScale"
            style="width:200px;"
            min="0"
            :readonly="isCurrentProcess"
          >
            <template slot="append">公顷</template>
          </el-input>
        </el-form-item>
        <el-form-item label="实际可用与占补平衡面积" label-width="195px" style="margin-right:40px;">
          <el-input
            type="number"
            v-model="form.realityAtonableBalanceArea"
            style="width:200px;"
            min="0"
            :readonly="isCurrentProcess"
          >
            <template slot="append">公顷</template>
          </el-input>
        </el-form-item>
        <el-form-item label="实际建成高标准基本农田规模" label-width="195px" style="margin-right:40px;">
          <el-input
            type="number"
            v-model="form.realityCroplandScale"
            style="width:200px;"
            min="0"
            :readonly="isCurrentProcess"
          >
            <template slot="append">公顷</template>
          </el-input>
        </el-form-item>
        <el-form-item label="灾毁耕地面积" label-width="195px" style="margin-right:40px;">
          <el-input
            type="number"
            v-model="form.disasterPlowlandArea"
            style="width:200px;"
            min="0"
            :readonly="isCurrentProcess"
          >
            <template slot="append">公顷</template>
          </el-input>
        </el-form-item>
      </div>
      <!-- <div class="maintitle" style="line-height:40px;">
        主要建设内容
        <el-form-item v-if="!isCurrentProcess" style="margin-right:24px;margin-left:30px;">
          <el-button @click="handleDownloadTemp1" size="small" :disabled="isCurrentProcess">模板下载</el-button>
        </el-form-item>
        <el-form-item>          
          <el-upload
            :headers="{authorization: token}"
            :action="uploadUrl1"
            :on-success="handleUpload"
            accept=".xlsx"
            :disabled="isCurrentProcess"
            ref="upload_03"
            v-if="!isCurrentProcess"
          >
            <el-button size="small" type="primary">工程量导入</el-button>
          </el-upload>
        </el-form-item>        
      </div>
      <div>
        <el-table :data="form.mainConstructionContent" style="width: 100%">
          <el-table-column prop="sequence" label="序号" width="180"></el-table-column>
          <el-table-column prop="projectType" label="工程类型" width="180"></el-table-column>
          <el-table-column prop="projectName" label="工程名称"></el-table-column>
          <el-table-column prop="specs" label="规格" width="180"></el-table-column>
          <el-table-column prop="nums" label="数量" width="180"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
        </el-table>
      </div>-->
      <div style="margin-top:110px;">
        <el-form-item>
          <el-button type="primary" v-if="!isCurrentProcess" @click="onSubmit">提交</el-button>
          <el-button @click="$router.push('/projectManagement/planningStage/dealwith')">返回</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import config from "@/config/index.js";
import { getToken } from "@/utils/auth";
import {
  upTo,
  getProjectInfoById
} from "@/api/feasibilityStudy/fillInDistrictCounty.js";
import { queryProjectProcess } from "@/api/feasibilityStudy/common.js";
import {
  getProjectActualBudget,
  saveProjectActualBudget
} from "@/api/completionAcceptance/LaterProjectManagement.js";

import moment from "moment";
import axios from "axios";
export default {
  data() {
    return {
      projectId: localStorage.getItem("projectId"),
      form: {
        totalProjectCost: 0,
        constructionCost: 0,
        originalEquipmentCost: 0,
        otherExpenses: 0,
        contingencyCost: 0,
        constructionPerAcreInvestment: 0,
        addedPlowlandPerAcreInvestment: 0,
        realityConstructionTotalScale: 0,
        realityTidyScale: 0,
        realityExploitScale: 0,
        realityReclamationScale: 0,
        realityAddedPlowlandTotalArea: 0,
        realityAddedTidyPlowlandArea: 0,
        realityAddedExploitPlowlandArea: 0,
        realityAddedReclamationPlowlandArea: 0,
        realityCroplandExploitScale: 0,
        realityAtonableBalanceArea: 0,
        realityCroplandScale: 0,
        disasterPlowlandArea: 0,
        fieldRoadConstructionFee: 0,
        landLevelingProjectFee: 0,
        farmlandWaterConservancyProjectFee: 0,
        ecologicalProtectionEngineeringFee: 0,
        otherEngineeringFees: 0
      },
      uploadUrl: config.uploadUrl,
      baseUrl: config.baseUrl,
      uploadUrl1:
        config.baseUrl +
        "/renovation/feasibilityStudy/uploadMainConstructionContent",
      tableData: [],
      isCurrentProcess: true,
      token: getToken()
    };
  },
  created() {
    if (this.$route.name === localStorage.getItem("key")) {
      this.isCurrentProcess = false;
    }
    if (localStorage.getItem("lookStatus") == 2) {
      this.isCurrentProcess = true;
    }
    this.getData();
  },
  methods: {
    moment,
    onSubmit() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      for (var i in this.form) {
        if (this.form[i] == "" || this.form[i] == null) {
          this.form[i] = 0;
        }
      }
      var data = this.form;
      data["projectId"] = this.projectId;
      saveProjectActualBudget(data)
        .then(res => {
          loading.close();
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.$router.push(
            "/projectManagement/projectImplementation/dealwith"
          );
        })
        .catch(err => {
          loading.close();
        });
    },
    projectNumChange() {
      //计算工程总投资
      // this.form.totalProjectCost = Number(
      this.form.constructionCost =
        Number(this.form.fieldRoadConstructionFee) +
        Number(this.form.landLevelingProjectFee) +
        Number(this.form.farmlandWaterConservancyProjectFee) +
        Number(this.form.ecologicalProtectionEngineeringFee) +
        Number(this.form.otherEngineeringFees);

      this.form.totalProjectCost =
        Number(this.form.constructionCost) +
        Number(this.form.otherExpenses) +
        Number(this.form.originalEquipmentCost) +
        Number(this.form.contingencyCost);
    },
    handleUpload(res, file, fileList) {
      //工程量导入
      this.form.mainConstructionContent = res.data;
    },
    getData() {
      //获取回显信息
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getProjectActualBudget({ projectId: this.projectId })
        .then(res => {
          loading.close();
          if (res.data) {
            var mainData = {};
            for (var i in res.data) {
              if (i != "id" || i != "projectId") {
                mainData[i] = res.data[i];
              }
            }
            this.form = mainData;
            this.isCurrentProcess = true;
          }
        })
        .catch(res => {
          loading.close();
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.maincontent {
  padding: 10px 35px;
  .maintitle {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 25px;
    color: #4d4d4d;
  }
  .formcontent {
    margin-top: 30px;
  }
  .secondtitle {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 20px;
    margin-right: 20px;
    line-height: 38px;
  }
}
</style>
 